<template>
  <el-dialog
    class="add-milestone-model"
    title="里程碑设置"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    append-to-body
    :visible="visible"
    :width="$setRem(600)"
    :before-close="handleCancel">
    <div class="form-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        :label-width="$setRem(140)"
        ref="addProgressForm"
        class="rule-form">
        <el-form-item label="里程碑名称" prop="milepostName" required>
          <el-input placeholder="请输入里程碑名称" v-model="ruleForm.milepostName" clearable></el-input>
        </el-form-item>
        <el-form-item label="计划节点时间" prop="planTime" required>
          <el-date-picker
            v-model="ruleForm.planTime"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际节点时间" prop="actualTime">
          <el-date-picker
            v-model="ruleForm.actualTime"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="!scheduleType" label="附件" prop="fileUrl">
          <div class="file-text" v-if="ruleForm.fileUrl">
            <el-image
              v-if="files.hasImg"
              class="img"
              :src="files.url"
              :preview-src-list="[files.url]">
            </el-image>
            <span
              v-else
              class="file-name"
              :title="files.name"
              @click="handleUpload">
              {{ files.name }}
            </span>
            <i class="el-icon-delete file-delete" @click="handleRemove"></i>
          </div>
          <el-upload
            v-else
            ref="upload"
            :limit="1"
            action="#"
            :multiple="false"
            :on-change="handleDownLoad"
            :file-list="fileList"
            :auto-upload="false">
            <el-button
              slot="trigger"
              :loading="uploadLoading"
              size="small"
              type="primary">
              选取文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
            v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        提 交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    scheduleType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadLoading: false,
      ruleForm: {
        fileUrl: '',
        milepostName: '',
        remark: '',
        planTime: '',
        actualTime: ''
      },
      // 校验规则
      rules: {
        milepostName: [
          { required: true, message: '请填写里程碑名称' },
          { trigger: 'blur', message: '请填写里程碑名称' }
        ],
        planTime: [
          { required: true, message: '请选择计划时间' }
        ]
      }
    };
  },
  computed: {
    // 附件
    files() {
      const fileUrl = this.ruleForm.fileUrl;
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        fileUrl,
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
    fileList() {
      return this.files.fileUrl ? [{
        name: this.files.name,
        url: this.files.fileUrl
      }] : [];
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.ruleForm = {
          fileUrl: '',
          milepostName: '',
          remark: '',
          planTime: '',
          actualTime: ''
        };
        this.uploadLoading = false;
      }
    },
    formData: {
      deep: true,
      handler(data) {
        if (data) {
          Object.keys(this.ruleForm).forEach(key => {
            this.ruleForm[key] = data[key] || '';
          });
        }
      }
    }
  },
  methods: {
    /**
     * 删除文件
     */
    handleRemove() {
      this.ruleForm.fileUrl = '';
    },
    /**
     * 选取文件
     */
    handleDownLoad(file) {
      this.fileUpload(file.raw);
      return false;
    },
    // 上传文件
    async fileUpload(file) {
      const fm = new FormData();
      fm.append('file', file);
      this.uploadLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.fileUpload(fm);
      this.uploadLoading = false;
      if (success && data) {
        this.ruleForm.fileUrl = data;
      }
    },
    // 下载文件
    handleUpload() {
      this.files.url && window.open(this.files.url);
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    },
    handleSubmit() {
      this.$refs.addProgressForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.ruleForm);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .add-milestone-model {
    .form-container {
      /deep/ .el-form-item {
        .el-form-item__label {
          color: #fff;
        }
        .el-form-item__content {
          .el-input, .el-textarea {
            width: 400px;
          }
        }
        .file-text {
          max-width: 150px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding-right: 20px;
          .file-name {
            max-width: 130px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
          }
          .img {
            width: 100px;
            height: 65px;
          }
          i.file-delete {
            margin-left: 10px;
            font-size: 16px;
            color: $mainColor;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
